<template>
  <div class="app-container-box">
    <div class="box-tag" />
    <span class="title-text">数据统计</span>
    <div class="warp-line-top" />
    <div class="top-box">
      <span class="top-tips">如果用户进入时间不到1分钟，有几率无法获取最后在线时间。</span>
      <span class="total-watched">观众累计人数： {{ totalWatched }}人</span>
      <el-button :loading="downloadLoading" class="export-data-btn" type="primary" @click="handleDownload">导出数据</el-button>
      <el-pagination
        class="paging-postion"
        small
        layout=" prev, pager, next, jumper"
        :total="totalUserList"
        :page-size="SingInQuery.length"
        :pager-count="pagerCount"
        @current-change="onPageChanged"
      />
    </div>
    <div class="table-list-box">
      <el-table
        :data="singInData"
        style="width: 100%"
        :header-cell-style="elTableHeaderStyle"
        :cell-style="elTableCellStyle"
      >
        <el-table-column
          prop="id"
          label="ID"
          align="center"
        />
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
        />
        <el-table-column
          prop="hospital"
          label="单位(医院)"
          align="center"
        />
        <el-table-column
          prop="department"
          label="部门(科室)"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="电话"
          align="center"
        />
        <el-table-column
          prop="online_duration"
          label="在线时长(分钟)"
          align="center"
          :formatter="onlineDurationHandle"
        />
      </el-table>
    </div>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import { listSignIn } from '@/api/lives'
export default {
  name: 'SubjectSetting',
  data() {
    return {
      pagerCount: 5,
      totalUserList: 0,
      exportList: [],
      bookType: 'xlsx',
      autoWidth: true,
      downloadLoading: false,
      currentLive: undefined,
      totalWatched: '0',
      singInData: [],
      SingInQuery: {
        start: 1,
        live_id: '',
        length: 11
      }
    }
  },
  computed: {
    ...mapGetters([
      'choicedLive'
    ])
  },
  watch: {
    async 'choicedLive'(n, o) {
      this.currentLive = this.choicedLive
      this.SingInQuery.live_id = this.choicedLive.id
      var res = await listSignIn(this.SingInQuery)
      this.singInData = res.data
      this.totalWatched = res.count
    },
    SingInQuery: {
      async handler(n, o) {
        // var res = await listSignIn(this.SingInQuery)
        // this.singInData = res.data
        this.refreshDataList()
      },
      deep: true
    }
  },
  async mounted() {
    this.refreshDataList()
  },
  methods: {
    refreshDataList() {
      if (this.choicedLive.id) {
        this.SingInQuery.live_id = this.choicedLive.id
        listSignIn(this.SingInQuery).then((res) => {
          this.singInData = res.data
          this.totalWatched = res.count
          this.totalUserList = res.count
        })
      }
    },
    // 观看时长处理
    onlineDurationHandle(row) {
      if (row.online_duration === 0) {
        return row.online_duration
      }
      var m = row.online_duration / 60
      return m.toFixed(1)
    },
    onPageChanged(ev) {
      this.SingInQuery.start = ev
    },
    elTableHeaderStyle() {
      return {
        background: '#F0F1F2',
        font_size: '18px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#6D7A8E'
      }
    },
    elTableCellStyle() {
      return {
        font_size: '20px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#8B9DBA'
      }
    },
    async handleDownload() {
      this.downloadLoading = true
      var q = {
        live_id: this.SingInQuery.live_id
      }
      var res = await listSignIn(q)
      this.exportList = res.data
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['用户ID', '姓名', '单位(医院)', '部门(科室)', '电话', '在线时长(分钟)']
        const filterVal = ['id', 'name', 'hospital', 'department', 'phone', 'online_duration']
        const list = this.exportList
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename(),
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'online_duration') {
          var min = v[j] / 60
          return min.toFixed(1)
        }
        return v[j]
      })
      )
    },
    filename() {
      var d = Date.parse(new Date())
      return 'download-' + d
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container-box {
  height: 1010px;

}
.box-tag {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  position: relative;
  top: 25px;
}
.title-text{
  width: 171px;
  height: 23px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4A5462;
  top: 31px;
  left: 54px;
  position: absolute;
}
.user-radio {
  margin: 0 0px 0px;

  &-div{
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
  }
  &-p{
    font-size: 20px;
  }
  // 因为设置了scoped，所以固定的classname要用::v-deep操作
  ::v-deep {
    .el-radio-button__inner {
      border: none;
      border-radius: 4px;
      color: #6D7A8E;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: #2E9BEA;
      border-radius: 7px;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}
.channel-type-filter-box {
  border-radius: 7px;
  position: absolute;
  left: 83px;
  top: 93px;
  display: flex;
  height: 33px;
  align-items: center;
  .radio-group {
    margin-left: 20px;
    margin-right: 20px;
  }
  .channel-type-text {
  width: 86px;
  height: 20px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6D7A8E;
}
}
.warp-line-top {
  width: 1627px;
  height: 4px;
  background: #EDF5FB;
  top: 85px;
  position: absolute;
}
.top-tips {
  width: auto;
  height: auto;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #9BABC3;
  left: 56px;
  position: absolute;
}
.total-watched {
  width: auto;
  height: auto;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6D7A8E;
  position: absolute;
  left: 700px;
}
.export-data-btn {
  left: 960px;
  position: absolute;
  background: #2E9BEA;
  border-radius: 10px;
}
.top-box {
  display: flex;
  width: 1510px;
  height: 50px;
  align-items: center;
  top: 102px;
  position: absolute;
}

.table-list-box {
  position: absolute;
  top: 176px;
  left: 55px;
  width: 1518px;
  height: 654px;
}
.paging-postion {
  right: 30px;
  position: absolute;
}

</style>
